<template>
  <div class="login">
    <div class="ctimg"></div>
    <div class="loginitem">
      <div class="juxing">
        <div class="title">乐乐买菜ERP系统</div>
        <div class="titletext">
          <p><b>实现 <span style="color: #66ff00;font-size: 25px">100%</span> 准确率</b> </p>
          <p><b>提升 <span style="color: #ff6633;font-size: 25px">60%</span> 的作业率</b></p>
          <p><b>降低 <span style="color: #003399;font-size: 25px">20%</span> 人力成本</b></p>
<!--          <p><b>降低 <span style="color: #66ff00;font-size: 25px">70%</span> 采购成本</b></p>-->
        </div>
      </div>
      <div class="loginright">
        <el-form ref="queryParams" :model="queryParams"  class="formitem">
          <div class="text">登录账号</div>
          <el-form-item prop="username" class="userinput">
            <el-input
              class="userlogo"
              v-model="queryParams.username"
              type="text"
              auto-complete="off"
              placeholder="请输入账号"
            ></el-input>
          </el-form-item>
          <el-form-item prop="password" class="pasinput">
            <el-input
              class="paslogo"
              v-model="queryParams.password"
              type="password"
              auto-complete="off"
              placeholder="请输入密码"
              @keyup.enter.native="handleLogin"
            ></el-input>
          </el-form-item>
          <el-form-item class="dengli">
            <el-button class="denglu" @click="handleLogin">
              <span v-if="!loading">登 录</span>
              <span v-else>登 录 中...</span>
            </el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>

  </div>



<!--  <div class="back" >-->
<!--    <el-row class="back"  type="flex" justify="center" align="middle">-->
<!--      <el-col  :span="7">-->
<!--        <el-card class="pad40" shadow="hover">-->
<!--          <h1 class="head">乐乐买菜ERP系统</h1>-->
<!--          <el-form ref="loginForm"  :model="queryParams" label-width="80px">-->
<!--            <el-form-item label="用户名"  >-->
<!--              <el-input  placeholder="请输入用户名" class="loginInput" prefix-icon="el-icon-user" v-model="queryParams.username"> </el-input>-->
<!--            </el-form-item>-->
<!--            <el-form-item label="密码"  >-->
<!--              <el-input placeholder="请输入密码" class="loginInput" prefix-icon="el-icon-lock" v-model="queryParams.password" show-password></el-input>-->
<!--            </el-form-item>-->
<!--            <div  style="text-align: center;">-->
<!--              <el-button style="width: 295px;margin-left: 47px;" id="subBtn" type="primary" plain  @click="handleLogin">登录</el-button>-->
<!--            </div>-->
<!--          </el-form>-->
<!--        </el-card>-->
<!--      </el-col>-->
<!--    </el-row>-->
<!--  </div>-->
</template>

<script>
import request from '@/utils/request'
import {login,test} from '../api/apis'
export default {
  data() {
    return {
      loading:false,
      queryParams: {
        username: '',
        password:"",
      },
    }
  },
  methods: {
    handleLogin() {

     // if(!this.queryParams.username){
     //   this.$message({
     //     type: 'error',
     //     message: '用户名或密码不能为空!'
     //   });
     //   return
     // }
     //
     //  if(!this.queryParams.password){
     //    this.$message({
     //      type: 'error',66
     //      message: '用户名或密码不能为空!'
     //    });
     //    return
     //  }
      localStorage.setItem("token",'132')
      this.$router.push({path:"/"});
      return
      request({
        url: '/login',
        method: 'post',
        data:this.queryParams
      }).then(response => {
        if(response.code=='200'){
          localStorage.setItem("token",response.token)
          localStorage.setItem("loginUserName",this.queryParams.username)
          this.$router.push({path:"/"});
        }else {
          this.$message.error(response.msg)
        }
      });
    }
  }
}
</script>

<style rel="stylesheet/scss" >
.login {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  background-image: url("../assets/newbackgroundimage.png");
  background-size: cover;
}
.dibu {
  background: red;
  height: 40px;
  width: 100%;
}
.ctimg {
  width: 1100px;
  height: 928px;
  margin-bottom: 152px;
  background-size: cover;
  background: url("../assets/ctimg.png");

  margin-right: auto;
}
.loginitem .juxing {
  position: absolute;
  margin-left: 0;
  margin-top: 0;
  width: 493px;
  height: 100%;
  background-image: url("../assets/juxing.png");
  background-size: cover;
}
.loginitem .juxing .title {
  margin-top: 132px;
  margin-left: 78px;
  font-size: 30px;
  line-height: 29px;
  color: #fff;
  padding-bottom: 39px;
  font-weight: bold;
}
.loginitem .juxing .titletext {
  width: 262px;
  height: 71px;
  font-size: 16px;
  text-align: center;
  color: #fff;
  margin-left: 71px;
  margin-right: 100px;
  margin-top: 39px;
  margin-bottom: 156px;
  line-height: 16px;
}
.loginitem .loginright {
  height: 100%;
  width: 500px;
  right: 0;
  margin-top: 0;
  position: absolute;
}
.loginitem .loginright .text{
  position: absolute;
  margin-top: 61px;
  right: 241px;
  width: 91px;
  height: 24px;
  text-align: center;
  line-height: 30px;
  color: #22919c;
  font-weight: bold;
}
.loginitem .loginright .formitem {
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0px;
}
.loginitem .loginright .userinput {
  margin: 131px auto 0 auto;
  width: 298px;
}
.loginitem .loginright .pasinput {
  width: 298px;
  margin: 0 auto;
  margin-top: 60px;
}
.loginitem .loginright .el-input--medium{
  border: none;
  padding: 0 25px;
}
.loginitem .loginright .el-input__inner{
  border: none;
  padding: 0 25px;
}
.loginitem .loginright .userlogo::before {
  content: "";
  display: block;
  position: absolute;
  top: 12px;
  margin-left: 5px;
  background-image: url("../assets/user.png");
  width: 16px;
  height: 16px;
}
.loginitem .loginright .paslogo::before {
  content: "";
  display: block;
  position: absolute;
  top: 12px;
  margin-left: 5px;
  background-image: url("../assets/password.png");
  width: 16px;
  height: 16px;
}
.loginitem .loginright .dengli {
  line-height: 46px;
  margin: 50px auto;
  margin-left: 100px;
}
.loginitem .loginright .dengli .denglu {
  width: 298px;
  height: 46px;
  background-color: #22919c;
  border-radius: 5px;
  margin: 0 auto;
  text-align: center;
  color: #fff;
}
.loginitem .el-login-footer {
  height: 40px;
  line-height: 40px;
  position: fixed;
  background: red;
  color: red;
}

.loginitem {
  z-index: 10000;
  width: 994px;
  height: 467px;
  background-color: #fff;
  position: absolute;
}


</style>
